<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信息科服务系统</title>
    <!-- 引入 Element UI -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入图标库 -->
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_8d5l8fzk5b87iudi.css">
    <!-- 引入用户端样式 -->
    <link rel="stylesheet" href="user-styles.css">
</head>
<body>
    <div class="layout">
        <!-- 顶部导航 -->
        <header class="header">
            <div class="header-left">
                <div class="logo">信息科服务系统</div>
            </div>
            <div class="header-right">
                <div class="user-info">
                    <i class="el-icon-user"></i>
                    <span>张三</span>
                    <a href="#" class="logout">退出</a>
                </div>
            </div>
        </header>

        <!-- 主要内容区域 -->
        <div class="main-container">
            <!-- 快捷操作区 -->
            <div class="quick-actions">
                <div class="action-card" onclick="showForm('workorder')">
                    <i class="el-icon-document"></i>
                    <span>提交工单</span>
                </div>
                <div class="action-card" onclick="showForm('query')">
                    <i class="el-icon-search"></i>
                    <span>工单查询</span>
                </div>
                <div class="action-card" onclick="showForm('equipment')">
                    <i class="el-icon-monitor"></i>
                    <span>设备报修</span>
                </div>
                <div class="action-card" onclick="showForm('feedback')">
                    <i class="el-icon-message"></i>
                    <span>问题反馈</span>
                </div>
            </div>

            <!-- 工单提交表单 -->
            <div id="workorder-form" class="form-container hidden">
                <h2>提交工单</h2>
                <form class="el-form">
                    <div class="form-item">
                        <label>工单类型</label>
                        <select class="el-select">
                            <option value="">请选择工单类型</option>
                            <option value="software">软件问题</option>
                            <option value="hardware">硬件问题</option>
                            <option value="network">网络问题</option>
                            <option value="account">账号问题</option>
                        </select>
                    </div>
                    <div class="form-item">
                        <label>科室</label>
                        <select class="el-select">
                            <option value="">请选择科室</option>
                            <option value="function">功能科</option>
                            <option value="ultrasound">超声科</option>
                            <option value="imaging">检验影像科</option>
                            <option value="blood">采血科</option>
                            <option value="clinic1">临一科</option>
                            <option value="clinic2">临二科</option>
                            <option value="diagnosis">总检诊断科</option>
                        </select>
                    </div>
                    <div class="form-item">
                        <label>问题描述</label>
                        <textarea class="el-input" rows="4" placeholder="请详细描述您遇到的问题..."></textarea>
                    </div>
                    <div class="form-item">
                        <label>联系方式</label>
                        <input type="text" class="el-input" placeholder="请输入您的联系电话">
                    </div>
                    <div class="form-item">
                        <label>紧急程度</label>
                        <div class="radio-group">
                            <label><input type="radio" name="urgency" value="high"> 紧急</label>
                            <label><input type="radio" name="urgency" value="medium" checked> 普通</label>
                            <label><input type="radio" name="urgency" value="low"> 低急</label>
                        </div>
                    </div>
                    <div class="form-actions">
                        <button type="submit" class="el-button primary">提交工单</button>
                        <button type="button" class="el-button" onclick="hideForm('workorder')">取消</button>
                    </div>
                </form>
            </div>

            <!-- 工单查询区域 -->
            <div id="query-form" class="form-container hidden">
                <h2>工单查询</h2>
                <div class="search-bar">
                    <input type="text" class="el-input" placeholder="输入工单号查询">
                    <button class="el-button primary">查询</button>
                </div>
                <div class="table-container">
                    <table class="el-table">
                        <thead>
                            <tr>
                                <th>工单号</th>
                                <th>类型</th>
                                <th>紧急程度</th>
                                <th>状态</th>
                                <th>提交时间</th>
                                <th>处理人</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 数据将通过 JavaScript 动态填充 -->
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- 设备报修表单 -->
            <div id="equipment-form" class="form-container hidden">
                <h2>设备报修</h2>
                <form class="el-form">
                    <div class="form-item">
                        <label>设备类型</label>
                        <select class="el-select">
                            <option value="">请选择设备类型</option>
                            <option value="computer">电脑设备</option>
                            <option value="printer">打印设备</option>
                            <option value="network">网络设备</option>
                            <option value="medical">医疗设备</option>
                        </select>
                    </div>
                    <div class="form-item">
                        <label>设备编号</label>
                        <input type="text" class="el-input" placeholder="请输入设备编号">
                    </div>
                    <div class="form-item">
                        <label>故障描述</label>
                        <textarea class="el-input" rows="4" placeholder="请详细描述设备故障情况..."></textarea>
                    </div>
                    <div class="form-item">
                        <label>科室</label>
                        <select class="el-select">
                            <option value="">请选择科室</option>
                            <option value="function">功能科</option>
                            <option value="ultrasound">超声科</option>
                            <option value="imaging">检验影像科</option>
                            <option value="blood">采血科</option>
                            <option value="clinic1">临一科</option>
                            <option value="clinic2">临二科</option>
                            <option value="diagnosis">总检诊断科</option>
                        </select>
                    </div>
                    <div class="form-item">
                        <label>联系人</label>
                        <input type="text" class="el-input" placeholder="请输入联系人姓名">
                    </div>
                    <div class="form-item">
                        <label>联系电话</label>
                        <input type="text" class="el-input" placeholder="请输入联系电话">
                    </div>
                    <div class="form-item">
                        <label>图片上传</label>
                        <div class="file-upload">
                            <input type="file" id="file-input" accept="image/*" multiple>
                            <label for="file-input" class="file-upload-label">
                                <i class="el-icon-upload"></i>
                                <span>点击或拖拽文件到此处上传</span>
                            </label>
                            <div id="file-preview" class="file-preview"></div>
                        </div>
                    </div>
                    <div class="form-actions">
                        <button type="submit" class="el-button primary">提交报修</button>
                        <button type="button" class="el-button" onclick="hideForm('equipment')">取消</button>
                    </div>
                </form>
            </div>

            <!-- 问题反馈表单 -->
            <div id="feedback-form" class="form-container hidden">
                <h2>问题反馈</h2>
                <form class="el-form">
                    <div class="form-item">
                        <label>反馈类型</label>
                        <select class="el-select">
                            <option value="">请选择反馈类型</option>
                            <option value="suggestion">建议</option>
                            <option value="complaint">投诉</option>
                            <option value="bug">系统问题</option>
                            <option value="other">其他</option>
                        </select>
                    </div>
                    <div class="form-item">
                        <label>反馈内容</label>
                        <textarea class="el-input" rows="4" placeholder="请详细描述您的反馈内容..."></textarea>
                    </div>
                    <div class="form-item">
                        <label>联系方式</label>
                        <input type="text" class="el-input" placeholder="请输入您的联系方式">
                    </div>
                    <div class="form-actions">
                        <button type="submit" class="el-button primary">提交反馈</button>
                        <button type="button" class="el-button" onclick="hideForm('feedback')">取消</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 引入用户端脚本 -->
    <script src="user.js"></script>
</body>
</html> 